<!doctype html>
<style>
@font-face {
  font-family: AhemNoXHeight;
  src: url("../../resources/AhemNoXHeight.ttf");
}
.em { height: .5em; width: .5em; }
.ex { height: 1ex; width: 1ex; }
.cover { background: green; }
.back { background: red; }
.one { left: 10px; }
.two { left: 70px; }
#test > div { font-family: AhemNoXHeight; font-size: 100px; position: absolute; top: 10px; }
#description { margin-top: 70px; }
</style>

<div id='test'>
  <div class='back em one'></div>
  <div class='cover ex one' id='ex'></div>

  <div class='back ex two'></div>
  <div class='cover em two'></div>
</div>
<script src="../../resources/js-test.js"></script>
<script>
// Need to wait for fonts to load.
window.jsTestIsAsync = true;

function measureExBox() {
  return parseInt(getComputedStyle(document.getElementById('ex')).width);
}

window.onload = function() {
  description("This test ensures that the CSS 'ex' unit is treated as half the size of the CSS 'em' unit when a font has no x-height information, or an x-height is synthesized.");

  // We should either synthesize an xHeight or use half of the 'em' unit, but not 0.
  // http://dev.w3.org/csswg/css-values-3/#font-relative-lengths
  shouldBeGreaterThan("measureExBox()", "0");
  finishJSTest();
}
</script>
